<template>
  <div class="abort">
    <div class="top">
      <div class="name">Webfunny</div>
      <div class="sub">为程序员的进阶之路添砖加瓦</div>
    </div>
    <div class="wrap flex">
      <div class="module-title">关于Webfunny</div>
      <div class="content">Webfunny是一款轻量级前端异常监控和前端性能监控系统，致力于帮助前端工程师定位并解决各种线上问题，确保项目健康良好的运行。这是一款由前端工程师设计的软件，我们深知前端的痛点，我们希望前端的工作更有效率。Webfunny支持千万级别日PV量，能够满足用户的各种场景需求。同时，针对不通过企业和用户，提供一对一的定制化服务，满足更多业务需求。</div>
    </div>
    <div class="wrap flex">
      <div class="module-title">团队成员</div>
      <div class="content">我们是一群热爱技术的青年伙伴，分别来自全国各地。因为共同的爱好，我们走到了一起，希望通过大家的不断的努力，让webfunny帮助到更多的开发小伙伴。</div>
      <img :src="persons" class="persons" alt="">
    </div>
    <div class="wrap">
      <div class="module-title">联系我们</div>
      <div class="content">如果您想免费试用，请加我的微信，我将会给您发送试用版激活码。</div>
      <div class="content mt10">微信号：webfunny_2020</div>
      <div class="bg-qr">
        <img class="qr" :src="qrCode" alt="">
      </div>
    </div>


  </div>
</template>
<script setup lang="ts">
import persons from '~/assets/abort/persons.png'
import qrCode from '~/assets/home/qr-code.png'
</script>
<style lang="stylus" scoped>
@import '~/styles/common.styl';
.mt10
  margin-top 10px
.top
  {flexBoxColumn}
  width 375px
  height 180px
  background url('../../assets/abort/top.png') no-repeat center
  background-size 100% 100%
  .name
    font-size 35px
    font-family DINAlternate-Bold, DINAlternate
    font-weight bold
    color #FFFFFF
    line-height 40px
  .sub
    font-size 22px
    font-weight 400
    color #FFFFFF
    line-height 30px
    margin-top 15px
.wrap
  padding 0 16px
  margin-top 48px
  &.flex
    {flexBoxColumn}
  .module-title
    font-size: 26px;
    font-weight: 500;
    color: #393F56;
    line-height: 37px;
    text-align center
  .content
    font-size: 14px;
    font-weight: 400;
    color: #363B52;
    line-height: 24px;
    margin-top 16px
  .persons
    width 304px
    margin-top 20px
  .bg-qr
    {flexBox}
    margin-top 20px
    width 343px
    height 300px
    background url('../../assets/abort/bg-qr.png') no-repeat center
    background-size 100% 100%
    .qr
      width 200px
</style>